<template>
	<view>
		<view class="preview">
			<!-- 图片视频VR展示 -->
			<u-swiper v-if="type === 1" mode="none" :list="data.images" height="520" border-radius="0" bg-color="#fff">
			</u-swiper>
			<video class="preview-video" v-if="type === 2" :src="imgUrl(data.videofiles)" controls
				show-fullscreen-btn></video>
			<image class="preview-vr" v-if="type ===3" :src="data.images[0]" 
				@click="jump(`/pages/webview/webview?url=${data.vr}`)"></image>

			<!-- 操作按钮 -->
			<view class="custom-btn u-flex">
				<text v-if="data.is_follow_house" class="num1 iconfont icon-shoucang_shixin active"
					@click="followHouse"></text>
				<text v-else class="num1 iconfont icon-shoucang" @click="followHouse"></text>
				<text class="num2 iconfont icon-xiaoxi" v-if="steward[0]"
					@click="jump(`/pages/chat/detail?id=${steward[0].id}&name=${steward[0].nickname}&avatar=${steward[0].avatar}`)"></text>
				<text class="num3 iconfont icon-fenxiang" @click="shareShow = !0"></text>
			</view>

			<!-- 类型切换按钮 -->
			<view class="ctrl-type u-flex">
				<view @click="type = 1" :class="{active:type === 1}">图片</view>
				<view @click="type = 2" :class="{active:type === 2}" v-if="data.videofiles">视频</view>
				<view @click="type = 3" :class="{active:type === 3}" v-if="data.vr">VR</view>
			</view>
		</view>

		<!-- 价格信息 -->
		<view class="base-info">
			<view class="title u-flex">
				<view class="name">{{data.title}}</view>
			</view>
			<view class="label-list u-flex u-flex-wrap">
				<view v-for="item in data.housebaseset_features" :key="item.id">{{item.name}}</view>
			</view>
			<view class="price-info u-flex">
				<view class="item">
					<view class="price">{{Number(data.totalprice)}}(万/套)</view>
					<view class="tit">总价</view>
				</view>
				<view class="item">
					<view class="price">{{data.first_payment}}元</view>
					<view class="tit">首付</view>
				</view>
				<view class="item">
					<view class="price">{{Number(data.area)}}平</view>
					<view class="tit">面积</view>
				</view>

				<view class="item">
					<view class="price" :key="index" v-for="(item,index) in data.shops_type">{{item.name}}</view>
					<view class="tit">类型</view>
				</view>
			</view>
		</view>

		<!-- 基础信息 -->
		<view class="panel-info">
			<view class="panel-title u-flex">
				<view class="title">房源基本信息</view>
				<view class="more" @click="$store.commit('setHouseMore',data),jump('/pages/house/more/more')">查看更多<text
						class="iconfont icon-jiantouyou"></text></view>
			</view>
			<view class="panel-content u-flex u-flex-wrap">
				<view class="line-box u-flex line-box-nowrap">
					<view class="title">单价：</view>
					<view class="value">{{Number(data.unitprice)}}元/平</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.developers">
					<view class="title">开发商：</view>
					<view class="value">{{data.developers}}</view>
				</view>

				<view class="line-box u-flex" v-if="data.openingtime">
					<view class="title">挂牌：</view>
					<view class="value">{{$u.date(data.openingtime,'yyyy-mm-dd')}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.housebaseset_orientation_name">
					<view class="title">朝向：</view>
					<view class="value">{{data.housebaseset_orientation_name}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.buildingtype">
					<view class="title">楼型：</view>
					<view class="value">{{data.buildingtype}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.housebaseset_decorationtype_id">
					<view class="title">装修：</view>
					<view class="value">{{data.housebaseset_decorationtype_id}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.housebaseset_propertytype_name">
					<view class="title">权属：</view>
					<view class="value">{{data.housebaseset_propertytype_name}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.propertyrightsyears">
					<view class="title">产权年限：</view>
					<view class="value">{{data.propertyrightsyears}}年</view>
				</view>
				<view class="line-box u-flex" v-if="data.region_name">
					<view class="title">板块区域：</view>
					<view class="value">{{data.region_name}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.name">
					<view class="title">小区：</view>
					<view class="value">{{data.name}}</view>
				</view>
			</view>

		</view>

		<!-- 通勤 -->
		<view class="panel-info">
			<view class="panel-title u-flex">
				<view class="title">周边配套及通勤</view>
				<!-- <view class="more">查看更多<text class="iconfont icon-jiantouyou"></text></view> -->
			</view>
			<map v-if="data" scale="16" class="map-info" :latitude="data.lat" :longitude="data.lng" :markers="markers"
				@markertap="openMap"></map>
			<view class="panel-content u-flex u-flex-wrap">
				<view class="line-box u-flex line-box-nowrap" v-if="data.traffic">
					<view class="title">交通：</view>
					<view class="value">{{data.traffic}}</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.education">
					<view class="title">教育：</view>
					<view class="value">{{data.education}}</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.hospital">
					<view class="title">医疗：</view>
					<view class="value">{{data.hospital}}</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.life">
					<view class="title">生活：</view>
					<view class="value">{{data.life}}</view>
				</view>
			</view>
		</view>
		
		
		<view class="panel-info">
			<view class="panel-title u-flex">
				<view class="title">图文展示</view>
			</view>
			<view style="padding: 20rpx;">
				<u-parse :html="data.content"></u-parse>
			</view>
		</view>

		<!-- 户型 -->
		<!-- <view class="panel-info" v-if="data.housetypeimages">
			<view class="panel-title u-flex">
				<view class="title">全部户型</view>
				<view class="more">查看更多<text class="iconfont icon-jiantouyou"></text></view>
			</view>
			<view class="house-type">
				<image :src="imgUrl(data.housetypeimages)" mode="widthFix" @click="$app.showImg(data.housetypeimages)">
				</image>
				<view class="more" @click="jump(`/pages/house/more/images?img=${data.housetypeimages.toString()}`)">
					查看更多<text class="iconfont icon-jiantouyou"></text></view>
			</view>
		</view> -->

		<!-- 管家列表 -->
		<view class="panel-info steward-sticky">
			<view class="panel-title u-flex">
				<view class="title">管家推荐</view>
				<!-- <view class="more" @click="jump(`/pages/agent/steward-index?type=4&id=${data.id}`)">查看更多<text
						class="iconfont icon-jiantouyou"></text></view> -->
			</view>
			<view class="steward safe-area-inset-bottom">
				<detail-steward-list :list="steward" type="4" :did="data.id" :info="data"></detail-steward-list>
			</view>
		</view>

		<!-- 分享 -->
		<u-popup v-model="shareShow" mode="bottom" border-radius="10" closeable>
			<view class="share">
				<view class="u-flex share-box">
					<view class="share-item">
						<button class="u-reset-button" open-type="share">
							<view class="iconfont icon-weixin"></view>
							<text class="text">微信</text>
						</button>
					</view>
					<view class="share-item" v-if="steward[0]"
						@click="jump(`/pages/chat/detail?id=${steward[0].id}&name=${steward[0].nickname}&avatar=${steward[0].avatar}`)">
						<image :src="imgUrl(steward[0].avatar)"></image>
						<text class="text">{{steward[0].nickname}}</text>
					</view>
				</view>
				<view class="cancel" @click="shareShow = !1">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, //展示类型 1 图片 2视频 3 VR
				data: '',
				markers: [],
				steward: [],
				shareShow: !1, //分享
			}
		},
		methods: {
			followHouse() {
				this.$u.api.followHouse({
					build_type: 4,
					house_id: this.data.id
				}).then(res => {
					if (res == '取消成功') {
						this.data.is_follow_house = 0
					}
					if (res == '关注成功') {
						this.data.is_follow_house = 1
					}
					this.$u.toast(res)
				})
			},
			openMap() {
				uni.openLocation({
					name: this.data.address,
					latitude: Number(this.data.lat),
					longitude: Number(this.data.lng)
				})
			}
		},
		onLoad({
			id
		}) {
			this.$u.api.shops.detail({
				id
			}).then(res => {
				this.markers.push({
					id: 1,
					latitude: res.lat,
					longitude: res.lng,
					iconPath: '/static/icon/dingwei.png',
					title: res.name,
					width: 30,
					height: 30
				})
				this.data = res;
				this.$u.post('/api/housekeeper/getKeeper',{id:this.data.admin_housekeeper_id})
				.then(res=>this.steward = [res] || [])
			})
			// this.$u.post('/api/housekeeper/randIndex', {
			// 	type: 4,
			// 	id
			// }).then(res => this.steward = res)
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	// 展示
	.preview {
		position: relative;
		height: 520rpx;

		.preview-video {
			width: 750rpx;
			height: 520rpx;
		}

		.preview-vr {
			display: block;
			width: 750rpx;
			height: 520rpx;
		}

		.ctrl-type {
			border-radius: 28rpx;
			background-color: rgba(255, 255, 255, .5);
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 50rpx;

			view {
				width: 100rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
				font-weight: bold;
				color: #111;
			}

			.active {
				background-color: #ff3737;
				color: #fff;
				border-radius: 28rpx;
			}
		}

		.custom-btn {
			position: absolute;
			top: 30rpx;
			right: 40rpx;
			color: #fff;

			.iconfont {
				font-size: 44rpx;
				padding: 2rpx;
			}

			.num2 {
				font-size: 50rpx;
				margin: 4rpx 10rpx 0;
			}

			.num3 {
				font-size: 40rpx;
			}

			.active {
				color: #FF3737;
			}
		}
	}

	// 基础信息
	.base-info {
		background-color: #fff;
		padding: 30rpx 40rpx 40rpx;

		.title {
			.name {
				color: #111;
				font-size: 38rpx;
				font-weight: bold;
			}

			.label {
				text {
					background-color: #ff3737;
					color: #fff;
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					border-radius: 6rpx;
					margin: 0 6rpx;
				}

				.wait {
					background-color: #999;
				}
			}
		}

		.label-list {
			padding: 14rpx 0;

			view {
				color: #ffa400;
				font-size: 24rpx;
				margin-top: 4rpx;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.price-info {
			justify-content: space-between;

			.item {
				.price {
					color: #f00;
					font-size: 32rpx;
					font-weight: bold;
				}

				.tit {
					margin-top: 6rpx;
				}
			}
		}

		.counselor {
			border: 1rpx solid #ccc;
			border-radius: 16rpx;
			height: 92rpx;
			justify-content: space-between;
			margin-top: 14rpx;

			text {
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 30rpx;
			}

			.xyh {
				background-color: #ff3737;
				color: #fff;
				border-radius: 14rpx;
				padding: 14rpx 40rpx;
				margin-right: 14rpx;
			}
		}
	}

	// 房源基本信息
	.panel-info {
		background-color: #fff;
		margin-top: 16rpx;

		.panel-title {
			padding: 20rpx 40rpx;
			justify-content: space-between;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #111;
			}

			.more {
				color: #5d5d5d;
			}
		}

		.panel-content {
			padding: 20rpx 40rpx;
		}

		.line-box {
			align-items: flex-start;
			width: 50%;
			padding: 8rpx 0;

			&.line-box-nowrap {
				width: 100%;
			}

			.title {
				color: #979797;
				white-space: nowrap;
			}

			.value {
				color: #000000;
				word-break: break-all;
				text-align: justify;
			}
		}

		// 地图
		.map-info {
			width: 750rpx;
			height: 300rpx;
		}

		// 富文本
		.content-html {
			padding: 0 40rpx 40rpx;
		}

		// 户型图
		.house-type {
			padding: 0 40rpx 40rpx;

			image {
				display: block;
				width: 100%;
				margin-top: 40rpx;

				&:first-child {
					margin-top: 0;
				}
			}

			.more {
				text-align: center;
				font-size: 30rpx;
				color: #666;
				padding: 30rpx 0 0 0;

				.iconfont {
					margin-left: 14rpx;
				}
			}
		}

		// 管家
		.steward {
			padding: 0 40rpx 40rpx;

			.item {
				display: flex;
			}

			image {
				width: 110rpx;
				flex: 0 0 110rpx;
				height: 110rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.info-wrap {
				width: 0;
				padding: 20rpx 0;

				.top-title {
					.title {
						overflow: hidden;

						view {
							margin: 0 6rpx;
						}

						.name {
							font-size: 32rpx;
							font-weight: bold;
							margin-left: 0;
						}

						.type {
							background-color: #4edcc5;
							color: #fff;
							font-size: 24rpx;
							padding: 2rpx 10rpx;
							border-radius: 6rpx;
						}

						.score {
							color: #f00;
							font-size: 32rpx;
							margin-right: 0;
						}
					}
				}

				.label {
					padding: 10rpx 0;
					flex-wrap: wrap;

					view {
						border: 1rpx solid #ccc;
						font-size: 20rpx;
						border-radius: 8rpx;
						padding: 4rpx 10rpx;
						margin-right: 10rpx;
						margin-top: 4rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}

			.handle {
				text {
					background-color: #ffd7d7;
					color: #ff1e1e;
					width: 60rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 50%;
					margin-right: 10rpx;

					&:last-child {
						margin-right: 0;
					}

					font-weight: bold;
				}
			}
		}
	}

	// 管家悬浮
	.steward-sticky {
		position: sticky;
		width: 100%;
		bottom: 0;
		box-shadow: 0 -1rpx 14rpx #ddd;
	}

	// 分享
	.share {
		.share-box {
			justify-content: space-around;
			padding: 40rpx 120rpx;

			.share-item {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					display: block;
				}

				.iconfont {
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					color: #fff;
					background-color: #28c445;
					font-size: 70rpx;
					border-radius: 50%;
				}

				.text {
					text-align: center;
					display: block;
					margin-top: 10rpx;
				}
			}
		}

		.cancel {
			text-align: center;
			border-top: 1rpx solid #ddd;
			line-height: 90rpx;
			font-size: 30rpx;
		}
	}
</style>
